<!DOCTYPE html> <html>
<head>
<title>框架分解 第三步</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<style id="id_theme" type="text/css"></style>
<style type="text/css">
@font-face {
  font-family: 'ciyfont';  /* http://www.iconfont.cn/ 生成 */
  src: url('/jscss/font/iconfont.eot');
  src: url('/jscss/font/iconfont.eot?#iefix') format('embedded-opentype'),
  url('/jscss/font/iconfont.woff') format('woff'),
  url('/jscss/font/iconfont.ttf') format('truetype'),
  url('/jscss/font/iconfont.svg#ciyfont') format('svg');
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td,form,pre{margin: 0; padding: 0; -webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: border-box;}
input,button,textarea,select,optgroup,option,a:active,a:hover{outline:0}
img{display: inline-block; border: none; vertical-align: middle;}
li{list-style:none;}
table{border-collapse: collapse; border-spacing: 0;}
body{font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;overflow: hidden;}
a{text-decoration:none; }
.icon{font-family: ciyfont;font-style: normal;}
cite{font-style: normal;}
::-webkit-scrollbar{width: 0;height: 0;}
.ciy-header-height {
    height: 4em;/*顶部高度*/
    line-height: 4em;
}
.ciy-header-top {
    top: 4em;/*顶部高度*/
}
.ciy-header-topm {
    margin-top: 4em;/*顶部高度*/
}
.ciy-headertabs-height {
    height: 2.5em;/*页面标签高度*/
    line-height: 2.5em;
}
.ciy-headertabs-top {
    top: 6.5em;/*顶部+页面标签高度*/
}
.ciy-menu-left {
    left: 14em;/*菜单宽度*/
}
.ciy-menu-width {
    width: 14em;/*菜单宽度*/
    transition: all .8s;-webkit-transition: all .8s;
}
.ciy-header {
    border-bottom: 1px solid #f6f6f6;
    z-index: 1000;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    right: 0;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    transition: all .8s;-webkit-transition: all .8s;
}
.ciy-header-right{
    position: fixed;
    right: 0;
    top: 0;
}
.ciy-side {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1001;
    overflow-x: hidden;
    background-color: #20222A;
    color: #ffffff;
    box-shadow: 1px 0 2px 0 rgba(0,0,0,.05);
    transition: all .8s;-webkit-transition: all .8s;
}
.ciy-side-scroll {
    position: relative;
    width: calc(100% + 18px);
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}
.ciy-logo {
    position: fixed;
    left: 0;
    top: 0;
    text-align: center;
    color: #ffffff;
    z-index: 1002;
    overflow: hidden;
    background-color: #1E9FFF;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
}
.ciy-body {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 998;
    width: auto;
    overflow: hidden;
    overflow-y: auto;
    transition: all .8s;-webkit-transition: all .8s;
}

.ciy-body-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    display:none;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}
.ciy-body-show{
    display:block;
}
.ciy-body-item>iframe {
    width: 100%;
    height: calc(100% - 4px);
    display:none;
}
.ciy-body-item>iframe.active{
    display:block;
}
.ciy-headertabs {
    position: fixed;
    right: 0;
    padding: 0;
    background:#ffffff;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
    z-index: 999;
    cursor: pointer;
    transition: all .8s;-webkit-transition: all .8s;
}
.ciy-body-shade {
    position: fixed;
    display: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.3);
    z-index: 1000;
}
.ciy-menu-nav{
}
.ciy-menu-nav{
    cursor: pointer;
}
.ciy-menu-nav a{
    color:rgba(255,255,255,0.8);
}
.ciy-menu-nav li:hover>a{
    color:#ffffff;
}
.ciy-menu-nav li.active{
    background:rgba(255,255,255,0.1);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ciy-menu-nav>li>a>i{
    margin:0 0.5em 0 0.9em;
}
.ciy-menu-nav>li>ul>li>a{
    margin-left:3.3em;
}
.ciy-menu-nav>li>ul>li>ul>li>a{
    margin-left:4em;
}
.ciy-menu-nav>li,.ciy-menu-nav>li>ul>li,.ciy-menu-nav>li>ul>li>ul>li{
    display: block;
    width: 100%;
    line-height: 3em;
    min-height: 3em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.ciy-menu-nav>li>ul{
    display: none;
    background:#03152A;
}
.ciy-menu-nav>li>ul>li>ul{
    display: none;
    background:#03152A;
}
.ciy-menu-nav>li.show>ul{
    display: block;
}
.ciy-menu-nav>li.show>ul>li.show>ul{
    display: block;
}
.ciy-menu-more{
    content: '';
    width: 0;
    height: 0;
    border-style: solid dashed dashed;
    border-color: #fff transparent transparent;
    overflow: hidden;
    position: absolute;
    top: 1.4em;
    left: 12em;
    border-width: 6px;
    border-top-color: rgba(255,255,255,.7);
    transition: all .5s;-webkit-transition: all .5s;
}
li.show>.ciy-menu-more{
    top: 1em;
    border-color: transparent transparent #fff;
}
.ciy-nav-bar{
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 3em;
    background-color: #5FB878;
    transition: all .2s;
    -webkit-transition: all .2s;
}
@media (min-width:992px) {/*电脑*/
    .ciy-menu-shrink .ciy-side cite,.ciy-menu-shrink .ciy-side .ciy-menu-more,.ciy-menu-shrink .ciy-nav-bar{
        display:none;
    }
    .ciy-menu-shrink .ciy-side{
        width:3em;
    }
    .ciy-menu-shrink .ciy-menu-left {
        left: 3em;/*缩小菜单宽度*/
    }
    .ciy-menu-shrink .ciy-menu-width {
        width: 3em;/*缩小菜单宽度*/
    }
    .ciy-menu-shrink .ciy-menu-nav>li>ul {
        display:none!important;
    }
}
@media (max-width:992px) {/*平板和手机*/
    .ciy-side {
        transform: translate3d(-20em,0,0);
        -webkit-transform: translate3d(-20em,0,0);
    }
    .ciy-menu-left{
        left: 0;
    }
    .ciy-menu-shrink .ciy-side {
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
    .ciy-menu-shrink .ciy-body-shade {
        display:block;
    }
}
.ciy-headertabs-btn{
    display:block;
    height:100%;
    padding:0 0.8em;
    border-right:1px solid #eeeeee;
}
.ciy-headertabs-left{
    float:left;
    
}
.ciy-headertabs-right{
    float:right;
}
.ciy-headertabs-nav{
    height:2.5em;
    overflow:hidden;
    border-right:1px solid #eeeeee;
    transition: all .8s;-webkit-transition: all .8s;
}
.ciy-headertabs-nav li{
    display:inline-block;
    padding:0 1.5em;
    transition: all .8s;-webkit-transition: all .8s;
    position: relative;
    border-right:1px solid #eeeeee;
}
.ciy-headertabs-nav li.active{
    background: #1E9FFF;
    color:#ffffff;
}
.ciy-headertabs-nav li>i{
    position: absolute;
    top:0.2em;
    right:0.1em;
    color:rgba(0, 0, 0, 0.68);
    line-height: 1.2em;
    font-family: ciyfont;
    font-style: normal;
    display:none;
}
.ciy-headertabs-nav li:hover>i{
    display:block;
}
.ciy-headertabs-nav li:hover{
    background: #f8f8f8;
    color:#000000;
}
.ciy-headertabs-nav li:after{
    content: ' ';
    background: #000000;
    position: absolute;
    height:2px;
    left:50%;
    opacity: 0;
    top:0;
    width:0;
    display:block;
    transition: all .8s;-webkit-transition: all .8s;
}
.ciy-headertabs-nav li:hover:after{
    opacity: 1;
    width:100%;
    left:0;
}
.ciy-headertabs-nav li:hover.active{
    background: #0092ff;
    color:#ffffff;
}
.ciy-headertabs-nav>ul,.ciy-headertabs-nav li{
    white-space: nowrap;
}
@media (max-width:992px) {/*平板和手机*/
    .ciy-headertabs-nav{
        overflow-x: scroll;
    }
    .ciy-headertabs-nav li>i{
        display:block;
    }
}
    </style>
</head>
<body>
  <div id="id_body">
    <div class="ciy-layout">
      <div class="ciy-header ciy-header-height ciy-menu-left">
          <div>
              <a onclick="javascript:shrink();">菜单</a>
               按钮1 按钮2
          </div>
          <div class="ciy-header-right">
              <a onclick="javascript:changetheme('#ff0000');">皮肤1</a>
              <a onclick="javascript:changetheme('#00ff00');">皮肤2</a>
          </div>
      </div>
      <!-- 侧边菜单 -->
      <div class="ciy-side ciy-menu-width">
        <div class="ciy-side-scroll">
          <div class="ciy-logo ciy-header-height ciy-menu-width">
            <i class="icon" style='font-size:2em;vertical-align: middle;'>&#xe607;</i>
            <cite>第三步</cite>
          </div>
          <ul class="ciy-menu-nav ciy-header-topm">
            <li>
              <a>
                <i class="icon">&#xe607;</i>
                <cite>主页</cite>
              </a>
              <span class="ciy-menu-more"></span>
              <ul>
                <li>
                  <a data-href="home/console.html">控制台</a>
                </li>
              </ul>
            </li>
            <li>
              <a>
                <i class="icon">&#xe607;</i>
                <cite>组件</cite>
              </a>
              <span class="ciy-menu-more"></span>
              <ul>
                <li>
                  <a>子菜单1</a>
                  <span class="ciy-menu-more"></span>
                  <ul>
                    <li><a data-href="1.html">三级菜单1</a></li>
                    <li><a data-href="2.html">三级菜单2</a></li>
                  </ul>
                </li>
                <li>
                  <a data-href="3.html">子菜单2</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="layout_step1.html">
                <i class="icon">&#xe607;</i>
                <cite>第一步</cite>
              </a>
            </li>
            <li>
              <a href="layout_step2.html">
                <i class="icon">&#xe607;</i>
                <cite>第二步</cite>
              </a>
            </li>
          </ul>
          <span class="ciy-nav-bar"></span>
        </div>
      </div>
      <!-- 页面标签 -->
      <div class="ciy-headertabs ciy-header-top ciy-menu-left ciy-headertabs-height">
          <div class="icon ciy-headertabs-btn ciy-headertabs-left" onclick="headertabscroll('left')">
              &#xe604;
          </div>
          <div class="icon ciy-headertabs-btn ciy-headertabs-right">
              &#xe61f;
          </div>
          <div class="icon ciy-headertabs-btn ciy-headertabs-right" onclick="headertabscroll()">
              &#xe605;
          </div>
        <div class="ciy-headertabs-nav" id="id_headertabs">
          <ul id="id_headertabs_ul">
          </ul>
        </div>
      </div>
      <!-- 主体内容 -->
      <div class="ciy-body ciy-headertabs-top ciy-menu-left">
        <div class="ciy-body-item ciy-body-show" id="id_ifms">
        </div>
      </div>
      <div class="ciy-body-shade" onclick="shrink();"></div>
    </div>
  </div>

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    'use strict';
    $(function(){
        ifropen('layout_welcome.html','控制台',true);
        $('#id_headertabs_ul').on("click","i",function(ev){
            var domtab = $(this).parents('li');
            if(domtab.hasClass("active"))
            {
                var domltab = domtab.next();
                if(domltab.length == 0)
                    domltab = domtab.prev();
                ifropen('',domltab.attr('data-tit'))
            }
            var txt = domtab.attr('data-tit');
            var domifm = $("#id_ifms>iframe[data-tit='"+txt+"']");
            domifm[0].src = 'about:blank';
            domifm[0].contentWindow.close();
            setTimeout(function(){
                domifm.remove();
            },100);
            domtab.remove();
            var oEvent = ev || event;
            oEvent.stopPropagation();
        });
        $('#id_headertabs_ul').on("click","li",function(ev){
            $("#id_headertabs_ul>li").removeClass('active');
            $("#id_ifms>iframe").removeClass('active');
            $(this).addClass('active');
            $("#id_ifms>iframe[data-tit='"+$(this).attr('data-tit')+"']").addClass('active');
        });
        $('.ciy-menu-nav').on("click","li",function(ev){
            if($('#id_body').hasClass("ciy-menu-shrink") && window.innerWidth > 992)
            {
                $('.ciy-menu-nav ._ulshow').slideUp(400);//收缩的情况下，隐藏所有菜单展开
                $('.ciy-menu-nav .show').removeClass("show");//同上
                $('#id_body').removeClass("ciy-menu-shrink");
            }
            if($(this).hasClass("show"))
            {
                $(this).children('ul').slideUp(400);
                $(this).removeClass("show");
            }
            else
            {
                //关闭上次打开菜单
                if($(this).parents('ul').length == 1)
                {
                    $('.ciy-menu-nav ._ulshow').removeClass("_ulshow").slideUp(400);
                    $('.ciy-menu-nav .show').removeClass("show");
                    $(this).children('ul').addClass("_ulshow");
                }
                //关闭上次打开菜单 end
                $(this).children('ul').slideDown(400);
                $(this).addClass("show");
            }
            var href = $(this).children('a').attr('data-href');
            if(href !== undefined)
            {
                ifropen(href,$(this).children('a').text());
                $('.ciy-menu-nav li').removeClass("active");
                $(this).addClass("active");
                if(window.innerWidth < 992)
                    shrink();
            }
            var oEvent = ev || event;
            oEvent.stopPropagation();
        });
        $('.ciy-menu-nav').on("mousemove",function(ev){
            if($('#id_body').hasClass("ciy-menu-shrink"))
            {
                var el = ev.target;
                if(ev.target.tagName != 'LI')
                    el = $(ev.target).parents('li');
                var txt = $(el).find('cite').text();
                $(el).find('i').attr('title',txt);
            }
            else
            {
                var top = $(".ciy-side-scroll").scrollTop();
                if(ev.target.tagName != 'LI')
                    top += $(ev.target).parents('li').offset().top;
                else
                    top += $(ev.target).offset().top;
                $(".ciy-nav-bar").css('top',top);
            }
        });
    });
    function ifropen(url,txt,ableclose)
    {
        var elifms = document.getElementById("id_ifms");
        var eltabs = document.getElementById("id_headertabs_ul");
        var elifm = elifms.querySelector("[data-tit='"+txt+"']");
        if(elifm == null)
        {
            if(url == "")
                return;
            $("#id_headertabs_ul>li").removeClass('active');
            $("#id_ifms>iframe").removeClass('active');
            $(elifms).append("<iframe class='active' src='"+url+"' data-tit='"+txt+"' frameborder='0'></iframe>");
            if(ableclose)
                ableclose = '';
            else
                ableclose = '<i>&#xe6b9</i>';
            $(eltabs).append("<li class='active' data-tit='"+txt+"'><a>"+txt+"</a>"+ableclose+"</li>");
            //滚动到最后
            var div = document.getElementById('id_headertabs');
            div.scrollLeft = div.clientWidth+$(div).width();
        }
        else
        {//激活
            var eltab = eltabs.querySelector("[data-tit='"+txt+"']");
            if(eltab == null)
                alert('eltab出现错误');
            $("#id_headertabs_ul>li").removeClass('active');
            $("#id_ifms>iframe").removeClass('active');
            $(eltab).addClass('active');
            $(elifm).addClass('active');
            //自动滚动到能看到选中
            var div = document.getElementById('id_headertabs');
            var vsta = $(eltab).offset().left+div.scrollLeft-$(div).offset().left;
            if(div.scrollLeft>vsta)
                div.scrollLeft=vsta;
            else
            {
                var vend = vsta-$(div).width()+$(eltab).width()+$(eltab).width();
                if(div.scrollLeft<vend)
                    div.scrollLeft=vend;
            }
            //自动滚动到能看到选中 end
        }
    }
    function changetheme(color){
        var d = document.getElementById("id_theme");
        if(d !== undefined)
            d.innerText=".ciy-logo{color:"+color+"!important;}";
    }
    function shrink(){
        $('#id_body').toggleClass("ciy-menu-shrink");
    }
    function headertabscroll(act){
        var div = document.getElementById('id_headertabs');
        var width = $(div).width()*2/3;
        var sl = div.scrollLeft;
        if(act == 'left')
            sl -=width;
        else
            sl +=width;
        div.scrollLeft = sl;
    }
</script>
</body></html>